<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="lib/easeljs-0.7.1.min.js"></script>
	<script type="text/javascript" src="lib/tweenjs-0.5.1.min.js"></script>
</head>
<body onload="init()">
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid black;"></canvas>
</body>
</html>

<script type="text/javascript">
	var stage,text,rect;
	var count=0;
	function init() {
		stage = new createjs.Stage(document.getElementById("mycanvas"));
		textRect()
		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener("tick",function(e){
			count++
			text.text = "It has been a " + count + "s time"
			rect.graphics.clear().beginFill("red").drawRect(0,0,400,50);
			stage.update(e);
		})
		// start();
	}

	function textRect() {
		text = new createjs.Text("It has been a ","36px Arial","#ffffff");
		text.x = 20;
		text.y = 20;
		text.rotation = 20;
		stage.addChild(text);
		rect = new createjs.Shape();
		rect.x = text.x;
		rect.y = text.y;
		rect.rotation = text.rotation;
		stage.addChildAt(rect)

	}

	function start() {
		text = new createjs.Text("gameover","20px Arial","red");
		text.textBaseline = "middle";
		text.textAlign = "center";
		text.x = stage.canvas.width/2;
		text.y = stage.canvas.height/2;
		stage.addChild(text)
		createjs.Tween.get(text).wait(1000).to({y:500,alpha:0.1},2000,createjs.Ease.quadOut);
	}
</script>